// 引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 使用vuex
Vue.use(Vuex)

const store = new Vuex.Store({
    // 开启严格模式 只有在开发环境会开启严格模式，上线了不等于development就不会开启
    strict: process.env.NODE_ENV === 'development',
    // 提供数据
    state: {
        list: [{
                id: 1,
                name: '吃饭',
                isDone: false
            },
            {
                id: 2,
                name: '睡觉',
                isDone: true
            },
            {
                id: 3,
                name: '打豆豆',
                isDone: false
            },
        ],
        type: 'all'
    },
    // 方法
    mutations: {
        // 修改复选框状态
        updateCheckbox(state, id) {
            const obj = state.list.find(item => item.id === id)
            obj.isDone = !obj.isDone
        },
        // 删除
        del(state, id) {
            state.list = state.list.filter(item => item.id !== id)
        },
        // 添加
        add(state, name) {
            state.list.unshift({
                id: Date.now(),
                name,
                isDone: false
            })
        },
        // 清除已经完成的任务列表
        completed(state) {
            state.list = state.list.filter(item => !item.isDone)
        },
        // 修改type的状态
        filter(state, type) {
            state.type = type
        },
        // 全选
        checkAll(state, value) {
            return state.list.forEach(item => {
                item.isDone = value
            })
        },
        // 修改  有多个参数需要用对象传  载荷payload
        edit(state, payload) {
            const obj = state.list.find(item => item.id === payload.id)
            obj.name = payload.value
        }
        // 用事件对象来获取input的值

    },
    // 计算属性
    getters: {
        // 计算任务列表中有多少没完成的任务数量
        leftCount(state) {
            return state.list.filter(item => !item.isDone).length
        },
        // 如果有任务完成就显示按钮
        isCompleted(state) {
            return state.list.some(item => item.isDone)
        },
        // 根据type的状态更改list
        showList(state) {
            if (state.type === 'active') {
                return state.list.filter(item => !item.isDone)
            } else if (state.type === 'completed') {
                return state.list.filter(item => item.isDone)
            } else {
                return state.list
            }
        },
    }
})

export default store